<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href = "../css/bootstrap.min.css">
    <style type="text/css">
        div{
            border: 1px solid #000;
        }
    </style>
<title>列表样式</title>
</head>
<body>
	<div class="container">
	<h1>标准列表</h1>
	<table class="table">
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
	</table>
		<hr>
		<h1>带条纹</h1>
	<table class="table table-striped">
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
	</table>
		<hr>
		<h1>带边框</h1>
	<table class="table table-striped table-bordered">
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
	</table>
		<hr>
		<h1>悬停</h1>
	<table class="table table-striped table-bordered table-hover">
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
	</table>
		<hr>
		<h1>紧凑</h1>
	<table class="table table-striped table-bordered table-hover table-condensed">
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
	</table>
		<hr>
		<h1>颜色样式</h1>
	<table class="table table-striped table-bordered table-hover table-condensed">
		<tr class="info">
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
		<tr class="success">
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr class="warning">
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr class="danger">
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr class="active">
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr class="active">
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
	</table>
		<hr>
		<h1>响应式</h1>
		<div class="row">
			<div class="col-sm-4">
				<div class="table-responsive">
					<table class="table table-striped table-bordered table-hover table-condensed">
						<tr class="info">
							<th>序号</th>
							<th>姓名</th>
							<th>年龄</th>
						</tr>
						<tr class="success">
							<td>1</td>
							<td>张三</td>
							<td>22</td>
						</tr>
						<tr class="warning">
							<td>1</td>
							<td>张三</td>
							<td>22</td>
						</tr>
						<tr class="danger">
							<td>1</td>
							<td>张三</td>
							<td>22</td>
						</tr>
						<tr class="active">
							<td>1</td>
							<td>张三</td>
							<td>22</td>
						</tr>
						<tr class="active">
							<td>1</td>
							<td>张三</td>
							<td>22</td>
						</tr>
					</table>
				</div>
			</div>
		</div>

		<hr>
	</div>
</body>
</html>